<template>
  <div class="outer" ref="outerRef">
    <div class="inner" @mousedown="mouseDown" @mousemove="mouseMove" @mouseup="mouseUp" @mouseleave="mouseUp">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DragArea',
  data() {
    return {
      isDragging: false
    };
  },
  methods: {
    mouseDown(el) {
      if (!this.isDragging) {
        this.isDragging = true;
      }
    },
    mouseMove(el) {
      if (this.isDragging) {
        if (this.$refs.outerRef) {
          this.$refs.outerRef.scrollLeft = this.$refs.outerRef.scrollLeft - el.movementX;
          this.$refs.outerRef.scrollTop = this.$refs.outerRef.scrollTop - el.movementY;
        }
      }
    },
    mouseUp(el) {
      if (this.isDragging) {
        this.isDragging = false;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.outer {
  overflow: hidden;
  background: #eee;
}
</style>
